<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      类与样式绑定
    </div>
    <a-divider />
    <div>
      <div
        class="static"
        :class="{ active: isActive, 'text-danger': hasError }"
      >
        直接绑定
      </div>
      <p />
      <div class="static" :class="classObject">绑定对象</div>
      <p />
      <div class="static" :class="computedClassObject">绑定计算属性</div>
      <p />
      <div :class="[activeClass, errorClass]">绑定数组</div>
      <p />
      <div :class="[isActive ? activeClass : '', errorClass]">
        使用三元表达式
      </div>
      <div :class="[{ active: isActive }, errorClass]">
        简写上面的三元表达式
      </div>
      <p />
      <MyComponent class="baz" />
      <p />
      <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
        绑定style
      </div>
      <p />
      <div :style="{ 'font-size': fontSize + 'px' }">绑定style</div>
      <p />
      <div :style="styleObject">直接绑定样式对象</div>
      <p />
      <div :style="[baseStyles, overridingStyles]">绑定样式数组</div>
      <p />
      <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">
        特殊前缀
      </div>
    </div>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";
export default {
  components: {
    MyComponent,
  },
  computed: {
    computedClassObject() {
      return {
        active: this.isActive && !this.error,
        "text-danger": this.error && this.error.type === "fatal",
      };
    },
  },
  data() {
    return {
      styleObject: {
        color: "red",
        fontSize: "13px",
      },
      activeColor: "red",
      fontSize: 30,
      isActive: true,
      hasError: false,
      error: {
        type: "fatal",
      },
      classObject: {
        active: true,
        "text-danger": false,
      },
      activeClass: "active",
      errorClass: "text-danger",
      baseStyles: {
        color: "red",
        "font-size": "24px",
      },
      overridingStyles: {
        color: "black",
      },
    };
  },
};
</script>

<style>
.static {
  font-size: 16px;
}
.active {
  border: 1px solid green;
}
.text-danger {
  color: red;
}
</style>
